making a div a link

[nitinpatel1117]

I need to make a whole div, become a link.

i currently have the code

<a href="temp.html"><div>some text</div></a>

but this does not validate as xhtml strict.

putting the link in the div will only make the text a link and not the whole div.
the reason i've got the div in there is becuase i use it to create a box and add a colored background to this.

I also need to be able to achieve the same thing, with a list item.
e.g. I currently have

<ul>
<a href="temp.html"><li>item 1</li></a>
<a href="temp2.html"><li>item 2</li></a>
<a href="temp3.html"><li>item 3</li></a>
</ul>

which does not validate

[Death Slaught]

I need to make a whole div, become a link.

i currently have the code
<a href="temp.html"><div>some text</div></a>

but this does not validate as xhtml strict.

putting the link in the div will only make the text a link and not the whole div.
the reason i've got the div in there is becuase i use it to create a box and add a colored background to this.

I also need to be able to achieve the same thing, with a list item.
e.g. I currently have
<ul>
<a href="temp.html"><li>item 1</li></a>
<a href="temp2.html"><li>item 2</li></a>
<a href="temp3.html"><li>item 3</li></a>
</ul>

which does not validate

It doesn't validate because it should be like this:


[HTML]<div><a href="temp.html">some text</a></div>[/HTML]

[HTML]<ul>
<li><a href="temp.html">item 1</a></li>
<li><a href="temp2.html">item 2</a></li>
<li><a href="temp3.html">item 3</a></li>
</ul>[/HTML]

I don't know where your learning from, but I would stop. Try here It's a pretty good tutorial on HTML.


Hope it helps, Death

[mohaakilla51]

he knows that is how it should be death, but he wants to make the ENTIRE div a link, which I am not sure how to do, unless you went with Javascript, at which point it would be
[html]
<div OnClick="document.location='http://google.com'"><noscript><a href="http://google.com"></noscript>some Text<noscript></a></noscript></div>
<!--THus, you will get divs that are links, unless the client has no javascript, which will cause the text to be links instead.-->
<!--the same for your lists -->
<ul>
<li OnClick="document.location='http://yahoo.com'"><noscript><a href="http://yahoo.com"></noscript>More Text<noscript></a></noscript></li>
</ul>
[/html]
Does that help? I cannot think of an XHTML strict way to do it otherwise...

Oh, and w3schools.com is an excellent source for HTML, CSS, and PHP (IMHO), although I don't think you need it...

[drhowarddrfine]

A div cannot be made into a link. It is a structural element, and block level, and is not content by itself. <a> is inline only and will not work on block level elements.

[nitinpatel1117]

yes i understand that the <a> is inline and <div> is block element.

and hence <div> can't reside in the <a>, but a while back i read something about making the <a> a block element and <div> an inline element, by using the css --> display:block & display:inline respectively. I tried this way but it doesn't seem to validate either.

Can't remember where i read it, it was a while back, so can't remember if i'm doing it the right way.

The div that i have represents a small box on the screen, this box contains an image and a <hr> tag and some text. The whole things needs to be a link.

i'm already using the javascript onclick method on the div, but i wanted to do it without using javascipt to make it more SEO friendly.

has anyone ever tried anything similar, or is there a better way of doing it, to acheive the same resutls.
Thanks

[Death Slaught]

yes i understand that the <a> is inline and <div> is block element.

and hence <div> can't reside in the <a>, but a while back i read something about making the <a> a block element and <div> an inline element, by using the css --> display:block & display:inline respectively. I tried this way but it doesn't seem to validate either.

Can't remember where i read it, it was a while back, so can't remember if i'm doing it the right way.

The div that i have represents a small box on the screen, this box contains an image and a <hr> tag and some text. The whole things needs to be a link.

i'm already using the javascript onclick method on the div, but i wanted to do it without using javascipt to make it more SEO friendly.

has anyone ever tried anything similar, or is there a better way of doing it, to acheive the same resutls.
Thanks

Depending on where your putting the text you can just make the image a link.......


- Death

[jp500]

It can be done with javascript, like this:

<div id="xxxxx" OnClick="javascript: window.open('http://www.xxxxx')">

In the syleheet add:
cursor: pointer;
to your div...

[drhowarddrfine]

I didn't know <div> had "onclick" as an attribute. Which makes me want to look further into making a div as a link. Just wrapping <a> around a <div> will work but the validator complains about it.

[ineedasn]

#list li a{
width: 100px;
display:block;
}

I guess
display:block;
seems to do the trick...
technically it wouldn't be a div as a link but same difference...

[Annalyzer]

The book I'm reading suggests setting the display property of the anchor to block.

a {
  display: block;
  width: 5em;
  padding: 0.2em;
  line-height: 1.5;
  background-color: #990099;
  text-decoration: none;
  text-align: center;
}

This doesn't use a <div> element, but does create the desired box and allows for a background color.

[jermouri]

in some cases, you can use something else instead of a div to achieve the same effect while pleasing the validator gods. for instance, a span or an img could work, and they are inline elements.
for ul li, what you can do is the following:
<style>li:hover {background:#ccc;}</style>
<ul>
<li><a>first choice</a></li>
<li><a>second choice</a></li>
</ul>
the link proper would be on the text inside the li but the li block will react to the cursor.

[hsriat]

The div that i have represents a small box on the screen, this box contains an image and a <hr> tag and some text. The whole things needs to be a link.

I believe there's no point of inserting an image and <hr> inside a link. A good alternative can be if you use display: block (as you already know), then use the image as a background-image with no-repeat, stuff a padding-left (or which ever side you want the image to be) according to the size of the image, and then finally replace the <hr> with border-bottom.
If you want an encapsulating border for this whole thing, pack it inside a div tag (w3c'cally legal) with required border and a small padding.

[kovik]

One: The OP wants it to validate. CSS doesn't cause HTML to validate. A block element cannot be placed in an inline element, regardless of the CSS. So, placing the DIV inside of the A won't work.

Two: Part of the lack of validation is that the LI element should be the only direct child of the UL element. The A element cannot be the direct child of the UL element.

Three: ~jermouri has it right, to a point. However, giving the block element a "cursor:pointer" style doesn't address the fact that clicking it will accomplish nothing.


So, the answer that you are looking for is to simply use an element other than DIV. For validation, you'll want to use an inline element. You could use SPAN, as suggested by ~jermouri, or you could use an element with more meaning. I, personally, am more likely to choose STRONG, EM, B, or I before resorting to SPAN.

You can then use CSS to make these elements block elements. The reason that hte HTML must validate without the CSS is because the HTML should be able to stand on its own without the CSS. Without CSS, block elements inside of inline elements makes no sense.


So, the final result is:

<a href="temp.html"><b>some text</b></a>

<ul>
    <li><a href="temp.html"><b>item 1</b></a></li>
    <li><a href="temp2.html"><b>item 2</b></a></li>
    <li><a href="temp3.html"><b>item 3</b></a></li>
</ul>

a,
a b {
  display: block;
}

[drhowarddrfine]

A lot of action for a 2-year old thread.

[kovik]

... Wish I had noticed. Lock?

[WmTn]

I use span instead of div.
Seems to work fine and validate XHTML Strict....

<a href="http://"><span class="" style="height:73px; width:150px;"></span></a>

Been using it for some time now since I found that using the div inside the link tags doesnt validate.
No problems whatsoever so far.

[kovik]

Double-necro'd. And with absolutely nothing new to add. Bravo.

[Dave Wouters]

Hi everyone,

Two possible solutions:

1) Put the link inside the <div> and wrap all inline elements within the link in <object> tags. So like this:

<div>
<a href="#">
<object><h3>Header text here</h3></object>
<img src="#">
<object><p>Paragraph text here</p></object>
</a>
</div>

This validates and everything within the <a> tag now becomes clickable. You don't have to put blocklevel elements (like <img>) within <object> tags to make this validate.

2) You can put your link inside a <span>, which is inside the <div>. You can then add a transparent image the size of the block you want to be clickable to the link (a completely transparent png or gif will work) and position this absolutely over the <div>. So like this:

<div>
<span><a href="#"><img src="transparent.png" width="200px" height="150px"</a></span>
<h3>Header text here</h3>
<img src="#">
<p>Paragraph text here</p>
</div>

To make it work you give the <span> the same width and height (using CSS) as your transparent image. So the CSS for the <span> would look something like this:

span {
width:200px;
height:150px;
position:absolute;
}

In order for the absolute positioning to work you need to position the containing <div> relatively. So the CSS for the containing <div> would look something like this:

div {
position:relative;
}

Hope this helps...

[drhowarddrfine]

Maybe we can continue this thread another 3 years from now.

[SalcWeb]

Simple answer, put a blank transparent PNG inside the div, set it to the same height and width as the div and link the image.

It's a bit heavy handed, but it works.

[kovik]

Seriously...? Just put an inline-level element in the anchor and use CSS to make it a block. It's not nearly as complicated as you guys are making it. When someone has CSS turned off, it means that they don't care what the page looks like. They don't need block-element links.

Now please... Let the thread die?

[luciminea]

The problems are simple. YES a div can be a link, those who doesn't know it yet, should learn some more. The html code for this is as simple as you wrote initialy:

<a href="#"><div class="someclass"><div></a>

But for this to work, should have in the .css file as a rule for you div, the folowing: a given height, a given width, and the rule display:block, but not for <a> element, but for "someclass" element.

Do that and I gurantee this work without a single problem.

For the list problem (ul and li) I wouldn't sugest you use this technique, better explain exactly what you want to achieve, and we'll help you with the right solution.

[drhowarddrfine]

Almost five years ago, WHEN THIS THREAD ORIGINALLY STARTED, trying to make a div a link was invalid. It has only been possible and valid to do with HTML5.

[luciminea]

Oh my god ! My bad, I didn't look at the date, my apology.

[kovik]

The thread that never dies. At least it gives me a reason to check up on Bytes and read how much of a **** I used to be. Good times, man. Good times.

[rybo111]

@drhowarddrfine
No worries.

HTML:

<div class="inner-link">
  Go to <a href="https://google.com">Google</a>
</div>

jQuery:

$(".inner-link").click(function() {
  window.location = $(this).find("a").attr("href");
});